<template>
  <div class="vip-list-add views-container">
    <div class="wlm-form">
      <div class="wlm-form-header">{{`${!!formFormatData.api['editForm']['params']['id']?'编辑':'添加'}会员卡`}}</div>
      <div class="wlm-form-content">
        <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
          <el-form-item label="会员卡排序">
            <el-input v-model.trim="formFormatData.formData.card_sort"></el-input>
            <div class="form-help">会员卡在客户端显示次序，数字越小，排序越靠前</div>
          </el-form-item>
          <el-form-item label="会员卡名称">
            <el-input v-model.trim="formFormatData.formData.card_title"></el-input>
          </el-form-item>
          <el-form-item label="赠送优惠券">
            <el-select clearable v-model="formFormatData.formData.coupon_id" class="mincheck" placeholder="请选择">
              <el-option v-for="item in couponData" :key="item.coupon_id" :label="item.name" :value="item.coupon_id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="优惠券个数">
            <div class="coupon-num-input">
              <el-input-number :disabled="!formFormatData.formData.coupon_id" class="coupon-num-input" :controls="false" size="small" :min="0" v-model="formFormatData.formData.coupon_number"></el-input-number>
            </div>
          </el-form-item>
          <el-form-item label="会员卡类型">
            <el-radio-group v-model="formFormatData.formData.card_type" @change="clearCardType" :disabled="isFormEdit">
              <el-radio :label="1">时间卡</el-radio>
              <el-radio :label="2">日期卡</el-radio>
            </el-radio-group>
            <div class="form-help">保存后不可修改，请谨慎选择</div>
          </el-form-item>
          <el-form-item label="会员卡时长" v-if="formFormatData.formData.card_type==1">
            <el-input v-model="formFormatData.formData.card_time_date">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
          <el-form-item label="会员卡日期" v-if="formFormatData.formData.card_type==2">
            <el-date-picker
              style="width:360px;"
              format="yyyy-MM-dd"
              :picker-options="afterOptions"
              v-model="formFormatData.formData.card_time_date"
              value-format="timestamp"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="买卡价格">
            <el-input v-model="formFormatData.formData.card_price">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="划线价">
            <el-input v-model="formFormatData.formData.card_marking_price">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="是否允许续费">
            <el-radio-group v-model="formFormatData.formData.is_renew">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
            <div class="form-help">保存后不可修改，请谨慎选择</div>
          </el-form-item>
          <el-form-item label="说明">
                <ueditor
                    v-if="isFirst"
                    :ueditorChange="shopInfoChange"
                    :ueditorList="ueditorList"
                    :bindIndex="1"
                    :defaultMsg='defaultMsg1'
                    :config='{initialFrameWidth: null,initialFrameHeight: 850}'
                    ref="by_know"></ueditor>
          </el-form-item>
          <!-- <el-form-item label="备注">
           <el-input type="textarea" v-model="formFormatData.formData.remarks" ></el-input>
          </el-form-item> -->
        </el-form>
      </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button size="small" @click="saveForm" type="primary" :loading="loading">保存</el-button>
      <router-link tag="span" to="/application/vipList">
        <el-button size="small">返回</el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
import ChooseFiles from '@/components/ChooseFiles/index'
import {
  getCardData,
  memberAddEdit,
  memberCoupon
} from '@/api/application'
import mixins from '@/mixins/mixins'
  import ueditor from '@/components/Ueditor/index'
export default {
  mixins: [mixins.getters('Form')],
  name: 'VipListAdd',
  components: {
    ChooseFiles,
    ueditor
  },
  directives: {

  },
  created() {
    memberCoupon().then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      const result = []
      msgData.map(item => {
        const { coupon_id, name } = item
        result.push({ coupon_id, name })
      })
      this.couponData = result
    })
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.isFirst = true
      }, 500)
 
    })
  },
  data() {
    return {
      isFirst:false,
      loading:false,
      couponData: [],
      ueditorList: [],
      defaultMsg1: '',
      formFormatData: {
        key: 'userForm',
        api: {
          editForm: {
            api: getCardData,
            params: {
              id: ''
            }
          },
          submitForm: memberAddEdit
        },
        formData: {
          coupon_id: '',
          coupon_number: '',
          card_title: '',
          card_sort: '',
          card_type: 1,
          content:'', //说明
          card_marking_price: '',
          card_price: '',
          card_time_date: '',
          is_renew: 1
          // remarks: ''
        },
        rules: {
        }
      }
    }
  },
  methods: {
    saveForm(){
       this.formFormatData.formData.content = this.defaultMsg1
      this.formFormatSubmit({ router: { type: 'replace', path: '/application/vipList', code: 1 }})
    },
    clearCardType(val) {
      this.formFormatData.formData.card_time_date = ''
    },
    shopInfoChange(msg) {
            this.defaultMsg1 = msg
            },
            formFormatCallBack(data, type, response) {
                if (type === 'editForm') {
                    const { content } = data
                    this.defaultMsg1 = content
                }
            },
  }
}
</script>
